import { onMounted, ref, watch, type Ref } from "vue";
import * as bootstrap from 'bootstrap'

// 函数式编程 =>将重复类似的逻辑抽离出来进行函数化 
// Ref 是一个泛型类型（通常用于框架，如 Vue 或 React），用于表示对某个值的引用。
// 1.包含一个value属性 2.响应式 3.ts中的类型定义 Ref<boolean>：表示一个Ref对象，内部的calue属性是布尔值

// 函数需要控制显示的参数 返回的 modal, modalRef, show, hide
export function useModal(isShow: Ref<boolean>) {
    // 1.定义modal和modalRef
    const modal = ref()
    const modalRef = ref()
    // 监听isShow的变化 => modal.value
    watch(() => isShow.value, (newValue) => {
        if (newValue) {
            show()
        } else {
            hide()
        }
    })
    // 2.初始化modal
    onMounted(() => {
        modal.value = new bootstrap.Modal(modalRef.value, { backdrop: true, keyboard: true })
        // 监视modalRef隐藏：hidden.bs.modal	当互动视窗隐藏后将会触发此事件（等CSS转换完成）
        modalRef.value.addEventListener('hidden.bs.modal', function () {
            // do something...
            // 监视modalRef隐藏 =>如果隐藏了，同步isShow为false
            isShow.value = false
        })
    })
    // 3.定义show()和hide()方法
    function show() {
        modal.value.show()
    }
    function hide() {
        modal.value.hide()
    }
    // 4返回一个 status 显示与否的状态量
    return {
        modal, modalRef, show, hide
    }
}